<template>
  <!--无视父路由，跳转到    :to="{path: '/home'}"-->
  <!--在父路由的前提下，跳转到  父路由/home  :to="{path: 'home'}"-->
  <router-link class="link" :to="{name: topath}">
    <div class="option">
      <img class="icon" :src="imgsrc">
      <span class="text">{{content}}</span>
    </div>
  </router-link>
</template>

<script>
export default {
  name: 'mine_option',
  props: ['content', 'topath', 'imgsrc']
}
</script>

<style lang="scss" scoped>
  .option {
    width: 100%;
    height: px2rem(54);
    background: #FFF;
    position: relative;
    line-height: px2rem(54);
    margin: 0 0 px2rem(2) 0;
    .link{
      width: 100%;
      height: px2rem(54);
      border: px2rem(2) solid red;
    }
    .icon {
      float: left;
      width: px2rem(25);
      height: px2rem(25);
      margin: px2rem(14) px2rem(18) px2rem(15) px2rem(35);
    }
    .text {
      float: left;
      line-height: px2rem(54);
      font-size: $text-size-imp;
      color: $text-color;
    }
  }
</style>
